<template>
  <div id="batchAssign">
    <el-dialog :append-to-body="true" :visible.sync="dialog" title="批量派单" width="940px">
      <el-form ref="form" :model="form" :inline="true" :rules="rules" size="small" label-width="125px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="故障类型">
              <el-select v-model="form.faultType" clearable class="input_text">
                <el-option v-for="item in faultTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工程师类别" prop="major">
              <el-select v-model="form.major" class="input_text">
                <el-option
                  v-for="item in majors"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工程师等级" prop="level">
              <el-select v-model="form.level" class="input_text">
                <el-option
                  v-for="item in levels"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="筛选方式" prop="filterOption">
              <el-select v-model="form.filterOption" class="input_text" @change="handleFilterSelect">
                <el-option
                  v-for="item in filterOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="服务商" prop="supplier">
              <el-select v-model="form.supplier" clearable class="input_text" @change="handleSelect">
                <el-option v-for="item in supplierOptions" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="绑定合同">
              <!-- <el-input v-model="form.contractId" style="width: 200px;"/>-->
              <el-select v-model="form.contractId" clearable class="input_text">
                <el-option v-for="item in contractOptions" :key="item.name + item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预约上门时间" prop="addriveTime">
              <el-date-picker
                v-model="form.addriveTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="timestamp"
                placeholder="选择日期时间"
                style="width: 300px;"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="预估服务时长" prop="serviceTime">
              <el-input-number v-model.number="form.serviceTime" :min="0" :max="999" controls-position="right" style="width: 300px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所需工具">
              <el-input v-model="form.requireTool" style="width: 300px;" :rows="4" type="textarea" />
            </el-form-item>
          </el-col>
          <el-col :span="12" />
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.notes" style="width: 760px;" :rows="4" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div style="text-align: right">
        <el-button type="text" @click="cancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="handleSubmit">确认</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '@/utils/request'
import { get } from '@/api/dictDetail'
import { EngineerMajors, EngineerLevels, filterOptions } from '@/constants/consts'
import { queryidandname } from '@/api/tServiceproviderInfo'

export default {
  name: 'BatchOrderInfo',
  props: {
    data: {
      type: Object,
      required: true,
      default: () => {}
    },
    supThis: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      loading: false, dialog: false,
      // serviceLevelOptions: [],
      faultTypeOptions: [],
      supplierOptions: [],
      contractOptions: [],
      filterOptions,
      majors: EngineerMajors,
      levels: EngineerLevels,
      form: {
        id: this.data.id,
        // serviceLevel: this.data.serviceLevel,
        contractId: this.data.contractId,
        faultType: this.data.faultType,
        supplier: this.data.supplier,
        addriveTime: this.data.addriveTime === null ? this.data.requireTime : this.data.addriveTime,
        serviceTime: this.data.serviceTime,
        requireTool: this.data.requireTool,
        notes: this.data.notes,
        assignOperator: this.data.assignOperator,
        assignTime: this.data.assignTime,
        acceptOperator: this.data.acceptOperator,
        status: this.data.status,
        acceptTime: this.data.acceptTime,
        level: this.data.level,
        major: this.data.major,
        filterOption: this.data.filterOption,
        selections: this.data.selections,
        evaluater: '' // 评价人，这里作为id串复用
      },
      rules: {
        filterOption: [
          { required: true, message: '请选择筛选方式', trigger: 'blur' }
        ],
        major: [
          { required: true, message: '请选择工程师类型', trigger: 'blur' }
        ],
        level: [
          { required: true, message: '请选择工程师等级', trigger: 'blur' }
        ],
        supplier: [
          { required: true, message: '请选择服务商', trigger: 'blur' }
        ],
        addriveTime: [
          { required: true, message: '请选择上门时间', trigger: 'blur' }
        ],
        serviceTime: [
          { required: true, message: '请选择服务时长', trigger: 'blur' }
        ],
        assignOperator: [
          { required: true, message: '请选择派单人', trigger: 'blur' }
        ],
        assignTime: [
          { required: true, message: '请选择派单时间', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    // 加载数据字典
    this.getDict('fault_type')
  },
  methods: {
    handleFilterSelect(value) {
      this.form.supplier = ''
      const data = this.data.taccident || this.data.task
      const params = {
        country: data.country,
        province: data.province,
        city: data.city,
        major: this.form.major,
        level: this.form.level
      }
      if (this.form.filterOption === '区') {
        params.county = data.county
      }
      queryidandname(params).then(res => {
        this.supplierOptions = res.map(item => ({
          id: item.id,
          name: item.seproName
        }))
      })
    },
    async getDict(name) {
      return new Promise((resolve, reject) => {
        get(name).then(res => {
          if (name === 'fault_type') {
            const content = [].concat(res.content)
            const _this = this
            content.forEach(function(data, index) {
              const faultTypeOption = { id: data.id, name: data.label }
              _this.faultTypeOptions.push(faultTypeOption)
            })
          } else {
            // const content = [].concat(res.content)
            // const _this = this
            // content.forEach(function(data, index) {
            //   const serviceLevelOption = { id: data.id, name: data.label }
            //   _this.serviceLevelOptions.push(serviceLevelOption)
            // })
          }
          resolve(res)
        }).catch(err => {
          reject(err)
        })
      })
    },
    to(data) {
      console.log(data, this.form)
      this.form.id = data.id
      this.dialog = true
      this.form = data
      console.log(data, this.form)
      this.handleSelect(data.supplier)
    },
    handleSelect(id) {
      if (id) {
        this.getSupplierContract(id)
      }
    },
    getSupplierContract(id) {
      request({
        url: 'api/tServiceproviderContract?page=0&size=1000&sort=creatTime,desc&serviceproviderId=' + id,
        method: 'get'
      }).then(res => {
        const content = [].concat(res.content)
        const _this = this
        _this.contractOptions = []
        content.forEach(function(data, index) {
          const contractOptions = { id: data.id, name: data.contractName }
          _this.contractOptions.push(contractOptions)
        })
        console.log(_this.contractOptions)
      }).catch(err => {
        console.log(err)
      })
    },
    cancel() {
      this.resetForm()
    },
    handleSubmit() {
      const _this = this
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.loading = true
          this.form.status = 200
          var temp = []
          console.log(_this.form.selections)
          _this.form.selections.forEach(item => { temp.push(item.id) })
          _this.form.evaluater = temp.join(',')
          request({
            url: 'api/tWorkOrder/batchAssign',
            method: 'post',
            data: _this.form
          }).then(res => {
            this.resetForm()
            this.$notify({
              title: '派单成功',
              type: 'success',
              duration: 2500
            })
            this.loading = false
            this.supThis.init()
          }).catch(err => {
            console.log(err)
            this.loading = false
          })
        } else {
          return false
        }
      })
    },
    resetForm() {
      this.dialog = false
      this.$refs['form'].resetFields()
      this.form = {
        id: '',
        // serviceLevel: '',
        contractId: '',
        faultType: '',
        supplier: '',
        addriveTime: '',
        serviceTime: '',
        requireTool: '',
        notes: '',
        assignOperator: '',
        assignTime: '',
        acceptOperator: '',
        acceptTime: '',
        major: '',
        level: '',
        filterOption: '',
        selections: [],
        evaluater: ''
      }
    }
  }
}
</script>

<style scoped>
#assign{
  display: inline-block;
  margin-right: 3px;
}
.input_text {
  width: 300px;
}
</style>
